<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>

<!-- 顶部导航栏 -->
<div class="layui-row">
    <ul class="layui-nav">
        <li class="layui-nav-item layui-this"><a href="/bookshop/indexPage">主页</a></li>
        <li class="layui-nav-item"><a href="/bookshop/carPage">购物车</a></li>
        <li class="layui-nav-item " style="float: right; "><a href="/login/logoutPage">退出</a></li>
        <li class="layui-nav-item" style="float: right; "><a onclick="editUserInfo()"><img src="/images/image.jpg" class="layui-nav-img"></a></li>

    </ul>
</div>

<div class="layui-row">
    <div style="height: 80vh; ">
        <div class="layui-bg-gray" style="padding: 10px;">
            <div class="layui-row layui-col-space15" id="view"></div>
        </div>
    </div>
    <div id="pageDiv"></div>
</div>

<script id="bookLaytpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">{{item.bookName}}</div>
            <div class="layui-card-body">
                <div style="display: inline-block">
                    <img src="{{item.bookImg}}" style="width: 130px; height: 200px; margin-right: 10px; ">
                </div>
                <div style="float: right; ">
                    <div>作者:{{item.bookAuthor}}</div>
                    <div>出版社：{{item.bookPublisher}}</div>
                    <div>售价：{{item.bookValue}}</div>
                    <div>库存：{{item.bookNumber}}</div>
                    <div>类别：{{item.kindName}}</div>
                    <div style="width: 160px; height: 100px; display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;">
                        简介：{{item.bookIntroduce}}</div>
                </div>
                <!-- 按钮 -->
                <div style="text-align: center; ">
                    {{#  if(item.bookNumber === '0'){ }}
                    <button class="layui-btn layui-btn-xs layui-btn-disabled">售罄</button>
                    {{#  } else { }}
                    <button class="layui-btn layui-btn-xs" onclick="addCar('{{item.id}}')">加入购物车</button>
                    {{#  } }}
                </div>
            </div>
        </div>
    </div>
    {{#  }); }}
</script>

<script src="/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
    layui.use(['element','laytpl','layer','laypage'], function(){
        let element = layui.element;
        let laytpl = layui.laytpl;
        let layer = layui.layer;
        let laypage = layui.laypage;

        $.ajax({
            type: "POST",
            url: '/bookshop/getBookData',
            data: JSON.stringify({}),
            contentType: "application/json",
            success: function (data) {
                //渲染分页
                laypage.render({
                    elem: 'pageDiv'
                    ,limit: 8
                    ,count: data.count //数据总数，从服务端得到
                    ,jump: function(obj, first){
                        $.ajax({
                            type: "POST",
                            url: '/bookshop/getBookData',
                            data: JSON.stringify({currentPage:obj.curr,limitCount:obj.limit}),
                            contentType: "application/json",
                            success: function (data) {
                                //渲染模板
                                let getTpl = bookLaytpl.innerHTML
                                    ,view = document.getElementById('view');
                                laytpl(getTpl).render(data.data, function(html){
                                    view.innerHTML = html;
                                });
                            }
                        });
                    }
                });

            }
        });

        //刷新标志
        let refreshFlag = false;
        setRefreshFlag = function(flag){
            refreshFlag = flag;
        };
        //加入购物车
        addCar = function(bookId){
            $.ajax({
                type: "POST",
                url: '/bookshop/saveCar',
                data: JSON.stringify({bookId:bookId}),
                contentType: "application/json",
                success: function (data) {
                    if(data === 'success'){
                        layer.msg("已加入购物车！");
                    }else{
                        layer.msg("发生错误，加入失败");
                    }
                }
            });
        }

        //修改用户信息
        editUserInfo = function (){
            $.ajax({
                type: "POST",
                url: '/login/getCurrentUser',
                contentType: "application/json",
                success: function (data) {
                    let obj = JSON.parse(data);
                    // $('#userNameLegend').text("当前登录者："+obj['userName'])
                    // alert(obj['userName']);
                    edit(obj['id']);
                }
            });
            edit = function (id){
                let index = layer.open({
                    type: 2,
                    content: "/manager/userForm",
                    area: ['800px', '200px'],
                    title: false,
                    closeBtn: 2,
                    maxmin: false,
                    success: function (layero) {
                        let body = layer.getChildFrame('body', index);
                        body.find('#id').val(id);
                    },
                    end: function () {
                        if (refreshFlag === true) {
                            window.location = "/bookshop/indexPage"
                        }
                    }
                })
            }
        }

    });
</script>
</body>
</html>